<template>
  <div class="order_list">
    <!-- 单件 -->
    <div class="order_list_item">
      <div class="order_list_header">
        <text class="order_list_header_title">{{orderData.groupBuyName}}(第{{orderData.periodId}}期)</text>
        <text class="order_list_header_status">{{orderData.createDate}}</text>
      </div>
      <div class="order_list_content" v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">
        <div  style="width: 650px;;display: flex;flex-direction: row;justify-content: center">
          <text   v-if="orderData.groupBuyId>4">R:{{orderData.orderRow}},C:{{orderData.orderCol}}</text>
          <text   v-if="orderData.groupBuyId==4 && orderData.parent!=null">上级团长:{{orderData.parent.nickname}}</text>
        </div>



        <!--        <div class="order_list_content_img mg-r20">-->
<!--          <image style="width:170px;height:170px" :src="item.thumbnail"></image>-->
<!--        </div>-->
        <div class="order_list_content_box">
<!--          <div class="order_list_content_top">-->
<!--            <text class="order_list_content_name">{{item.name}}</text>-->
<!--            <div class="order_list_content_price">-->
<!--              <text class="order_list_content_priceIcon">¥</text>-->
<!--              <text class="order_list_content_priceTitle">{{item.price | price}}</text>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="order_list_content_bottom">-->
<!--            <text class="order_list_content_subtitle" v-if="orderData.groupBuyId>4">R:{{orderData.orderRow}},C:{{orderData.orderCol}}</text>-->
<!--            <text class="order_list_content_subtitle" v-if="orderData.groupBuyId==4 && orderData.parent!=null">上级团长:orderData.parent.nickname</text>-->
<!--            <div class="order_list_content_price">-->
<!--              <text class="order_list_content_numberIcon">x</text>-->
<!--              <text class="order_list_content_number">{{item.quantity | number}}</text>-->
<!--            </div>-->
<!--          </div>-->
          <div class="aaaaaaaaa"  @click="relationshipClick" >
            <div class="order_list_bottom_itemBox" v-if="relationshipType == false">
              <div class="order_list_bottom_item">
                <image class="order_list_bottom_item_img" :src="avatar?avatar:logo"></image>
              </div>
              <div class="order_list_bottom_itemTwo">
                <image class="order_list_bottom_item_img" v-if="orderData.linkedList[0] != null" :src="orderData.linkedList[0].avatar?orderData.linkedList[0].avatar:logo"></image>
              </div>
              <div class="order_list_bottom_itemThree">
                <image class="order_list_bottom_item_img" v-if="orderData.linkedList[1] != null" :src="orderData.linkedList[1].avatar?orderData.linkedList[1].avatar:logo"></image>
              </div>
              <div class="order_list_bottom_itemFour">
                <image class="order_list_bottom_item_img" v-if="orderData.linkedList[2] != null" :src="orderData.linkedList[2].avatar?orderData.linkedList[2].avatar:logo"></image>
              </div>
              <div class="order_list_bottom_itemFive">
                <image class="order_list_bottom_item_img" v-if="orderData.linkedList[3] != null" :src="orderData.linkedList[3].avatar?orderData.linkedList[3].avatar:logo"></image>
              </div>
              <div class="order_list_bottom_itemSix">
                <image class="order_list_bottom_item_img" v-if="orderData.linkedList[4] != null" :src="orderData.linkedList[4].avatar?orderData.linkedList[4].avatar:logo"></image>
              </div>
              <div class="order_list_bottom_itemSeven">
                <image class="order_list_bottom_item_img" v-if="orderData.linkedList[5] != null" :src="orderData.linkedList[5].avatar?orderData.linkedList[5].avatar:logo"></image>
              </div>
            </div>
            <!--<div>-->
              <!--<text class="order_list_bottom_icon" v-if="relationshipType == false" @click="relationshipClick" >&#xe657;</text>-->
              <!--<text class="order_list_bottom_icon" v-if="relationshipType == true" @click="relationshipClick" >&#xe656;</text>-->
            <!--</div>-->
          </div>
        </div>
      </div>
<!--      v-if="relationshipType ==true"-->
      <div class="order_list_relationship_content">
        <div class="order_list_relationship">
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item">
              <image class="order_list_relationship_itemImg" :src="orderData.avatar?orderData.avatar:logo"></image>
            </div>
            <text class="order_list_relationship_itemTitle">{{ orderData.nickname }}</text>
          </div>
        </div>
        <div class="order_list_relationship">
          <div class="order_list_relationship_itemBox" >
            <div class="order_list_relationship_item" v-if="orderData.linkedList[0] != null">
              <image class="order_list_relationship_itemImg" :src="orderData.linkedList[0].avatar?orderData.linkedList[0].avatar:logo"></image>
            </div>
              <text   :class="[orderData.linkedList[0].orderStatus==0?'order_list_relationship_itemTitle_gray':'order_list_relationship_itemTitle']" v-if="orderData.linkedList[0] != null">{{ orderData.linkedList[0].nickname }}</text>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[1] != null">
              <image class="order_list_relationship_itemImg" :src="orderData.linkedList[1].avatar?orderData.linkedList[1].avatar:logo"></image>
            </div>
            <text :class="[orderData.linkedList[1].orderStatus==0?'order_list_relationship_itemTitle_gray':'order_list_relationship_itemTitle']" v-if="orderData.linkedList[1] != null">{{ orderData.linkedList[1].nickname }}</text>
          </div>
        </div>
        <div class="order_list_relationship">
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[2] != null">
              <image class="order_list_relationship_itemImg" :src="orderData.linkedList[2].avatar?orderData.linkedList[2].avatar:logo"></image>
            </div>
            <text :class="[orderData.linkedList[2].orderStatus==0?'order_list_relationship_itemTitle_gray':'order_list_relationship_itemTitle']" v-if="orderData.linkedList[2] != null">{{ orderData.linkedList[2].nickname }}</text>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[3] != null">
              <image class="order_list_relationship_itemImg" :src="orderData.linkedList[3].avatar?orderData.linkedList[3].avatar:logo"></image>
            </div>
            <text :class="[orderData.linkedList[3].orderStatus==0?'order_list_relationship_itemTitle_gray':'order_list_relationship_itemTitle']" v-if="orderData.linkedList[3] != null">{{ orderData.linkedList[3].nickname }}</text>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[4] != null">
              <image class="order_list_relationship_itemImg" :src="orderData.linkedList[4].avatar?orderData.linkedList[4].avatar:logo"></image>
            </div>
            <text :class="[orderData.linkedList[4].orderStatus==0?'order_list_relationship_itemTitle_gray':'order_list_relationship_itemTitle']" v-if="orderData.linkedList[4] != null">{{ orderData.linkedList[4].nickname }}</text>
          </div>
          <div class="order_list_relationship_itemBox">
            <div class="order_list_relationship_item" v-if="orderData.linkedList[5] != null">
              <image class="order_list_relationship_itemImg" :src="orderData.linkedList[5].avatar?orderData.linkedList[5].avatar:logo"></image>
            </div>
            <text  :class="[orderData.linkedList[5].orderStatus==0?'order_list_relationship_itemTitle_gray':'order_list_relationship_itemTitle']" v-if="orderData.linkedList[5] != null">{{ orderData.linkedList[5].nickname }}</text>
          </div>
        </div>
      </div>
      <!--<div class="order_list_bottom">-->
        <!--<div class="oder_appjs">-->
        <!--<text class="order_button" v-if="orderData.orderStatus==4" @click="ticlick">提现</text>-->
        <!--<text class="order_button" style="margin-left:15px" v-if="orderData.orderStatus==4" @click="upgradeclick">升级</text>-->
        <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
import {upgrade}from'@/api/groupOrder'
const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const pay = app.requireModule("eeui/pay");
export default {
  data() {
    return {
      relationshipType:true,
      logo:'http://cdn.rzico.com/qm365/ic_launcher.png'
    }
  },
  props:[
    'orderData'
  ],
  watch: {
    orderData(newName, oldName) {
        this.orderData=newName
        if(this.orderData.orderStatus==1){
            this.relationshipType=true
        } else {
            this.relationshipType=false
        }
    }
  },
    mounted() {
      if(this.orderData.orderStatus==1){
            this.relationshipType=true
        } else {
            this.relationshipType=false
        }
      console.log("8888888888888888888888888888888888888888888")
      console.log(this.orderData)
    },
  filters:{
    price(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    number(value){
      var toFixedNum = Number(value).toFixed(0);
      return toFixedNum;
    }
  },
  components:{
  },
  created(){
    this.initIconFont()

  },
  methods:{
    ticlick(){
         eeui.openPage({
            url: 'root://pages/member/distribution/transfer',
            statusBarType: 'immersion',
            statusBarStyle: false
          }, (result) => {}
      );
    },
    upgradeclick(){
      console.log(this.getGlobalData().token);
      upgrade({groupOrderId:this.orderData.id}).then(res=>{
         eeui.toast('升级成功')
         this.$emit('loadList')
      }).catch(res=>{

      })

    },
    relationshipClick(){
      this.relationshipType = !this.relationshipType
    }
  }
}
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
/*@import '../../style/wx.css'; !*引入公共样式*!*/
.order_list {
  width: 750px;
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
}

.order_list_item {
  width: 700px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  margin-top: 20px;
  padding: 25px;
  box-sizing: border-box;
}

.order_list_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 650px;
  height: 40px;
}

.order_list_header_title {
  font-size: 24px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
  width: 400px;
  lines:1;
  text-overflow: ellipsis;
}

.order_list_header_status {
  font-size: 24px;
  font-weight: 400;
  color:#ea706a;
}

.order_list_content {
  width: 650px;
  display: flex;
  flex-direction: row;
  margin-top: 42px;
  position: relative;
}

.order_list_content_img {
  width: 170px;
  height: 170px;
  background: rgba(250, 250, 250, 1);
  border-radius: 4px;
  overflow: hidden;
}

.order_list_content_box {
  display: flex;
  flex-direction: column;
}

.order_list_content_top {
  width: 460px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 15px;
}

.order_list_content_name {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 42px;
  display: block;
  lines:1;
  width: 320px;
  text-overflow: ellipsis;
}

.order_list_content_price {
  display: flex;
  flex-direction: row;
}

.order_list_content_priceIcon{
  font-size: 18px;
  font-weight: 400;
  color: #ea706a;
  line-height: 26px;
}

.order_list_content_priceTitle{
  font-size: 24px;
  font-weight: 400;
  color: #ea706a;
  line-height: 24px;
  /* margin-left: 2px; */
}
.aaaaaaaaa{
  margin-top: 20px;
  /* background-color: blueviolet; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order_list_content_bottom {
  width: 460px;
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
  justify-content: center;
  align-items: center;
}

.order_list_content_subtitle {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
  opacity: 0.5;
  width: 400px;
  text-overflow: ellipsis;
  lines:2;
}

.order_list_content_numberIcon{
  /*font-size: 20px;*/
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 26px;
  opacity: 0.5;
}

.order_list_content_number {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 24px;
  opacity: 0.5;
  margin-left: 2px;
}

.order_list_content_information {
  width: 650px;
  height: 40px;
  background: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 40px;
}

.order_list_content_left {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
  opacity: 0.5;
}

.order_price_title {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
}

.order_price_icon {
  font-size: 20px;
  font-weight: 400;
  color: #eb594f;
  line-height: 36px;
}

.order_price_number {
  font-size: 24px;
  font-weight: 400;
  color: #eb594f;
  line-height: 36px;
}
.order_price_box{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.order_list_botton {
  width: 650px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 40px;
}

.order_list_botton_gray {
  width: 136px;
  height: 48px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(126, 128, 136, 0.8);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 25px;
}

.order_list_botton_gray_title {
  font-size: 24px;
  font-weight: 400;
  line-height: 48px;
  color: rgba(26, 26, 30, 0.5);
}


.order_list_botton_red {
  width: 136px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
}

.order_list_botton_red_title {
  font-size: 24px;
  font-weight: 400;
  line-height: 48px;
  /* color: white; */
}

.order_list_content_more {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  right: 0;
  height: 170px;
}

.order_item_icon {
  font-size: 36px;
  opacity: 0.3;
  width: 50px;
  height: 50px;
}

.order_item_more_number {
  font-size: 24px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  opacity: 0.5;
}

.mg-l20 {
  margin-left: 20px;
}

.mg-r20 {
  margin-right: 20px
}

.order_list_bottom{
  flex: 1;
  position: relative;
  display:flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  /* background-color: blueviolet; */
}

.order_list_bottom_item{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
}

.order_list_bottom_item_img{
  width: 52px;
  height: 52px;
  background-color: #ea706a;
  border-radius: 50%;
}

.order_list_bottom_itemTwo{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 40px;
}

.order_list_bottom_itemThree{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 80px;
}

.order_list_bottom_itemFour{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 120px;
}

.order_list_bottom_itemFive{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 160px;
}

.order_list_bottom_itemSix{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 200px;
}

.order_list_bottom_itemSeven{
  width: 52px;
  height: 52px;
  background-color: #b4b4b4;
  border-radius: 100%;
  position: absolute;
  left: 240px;
}

.order_list_bottom_itemBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  flex: 1;
}

.order_list_bottom_icon{
  font-family: iconfont2;
  font-size: 24px;
  color: #b5b5b5;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  text-align: right;
}

.order_list_relationship_content{
  display: flex;
  margin-top: 20px;
}

.order_list_relationship{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  /*margin-bottom: 40px;*/
}

.order_list_relationship_itemBox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;

}

.order_list_relationship_item{
  width: 60px;
  height: 60px;
  background-color: #b4b4b4;
  border-radius: 50%;
}

.order_list_relationship_itemTitle{
  /*font-size: 16px;*/
  font-size: 32px;
  color: red;
  margin-top: 20px;
  lines:2;
  text-overflow: ellipsis;
}


.order_list_relationship_itemTitle_gray{
  /*font-size: 16px;*/
  font-size: 32px;
  color: #333333;
  margin-top: 20px;
  lines:2;
  text-overflow: ellipsis;
}

.order_list_relationship_itemImg{
  width: 60px;
  height: 60px;
  background-color: #ea706a;
  border-radius: 50%;
}
.order_button{
  font-size: 28px;
  width: 150px;
  height: 50px;
  display: flex;
  color: #fff;
  text-align: center;
  padding-top: 10px;
  border-radius: 15px;
  background-color: #ea706a;
}
.oder_appjs{
  width: 650px;
  /* background-color: blueviolet; */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
